<template>
  <div>
    <Form :label-width="75">
      <Row :gutter="20" class="code-row-bg" v-for="item in items" :key="item.langCode">
        <Col span="24">
          <Form-item :label="item.langDesc">
            <Input v-model="item.functionName" :maxlength="30" />
          </Form-item>
        </Col>
      </Row>
    </Form>
  </div>
</template>
<script>
import functionAPI from "@/api/functionAPI.js";
import locales from "./locales.js";

export default {
  name: "function-edit",
  mixins: [locales],
  props: {
    functionId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  created: function() {
    this.$emit("SetPageWidth", 400);
    this.getFunctionLang();
    this.$emit("SetTitle", this.$t("module.function.modifyFunctionName"));
    this.$emit("SetPageActions", [
      {
        text: this.$t("common.save"),
        theme: "primary",
        icon: "edit",
        action: "SetManuLAng",
        handle: this.updateFunctionLang
      }
    ]);
  },
  data() {
    return {
      items: []
    };
  },
  methods: {
    getFunctionLang() {
      functionAPI.getFunctionLang(this.functionId).then(data => {
        for (const key in data) {
          this.items.push({
            id: data[key].id,
            langCode: data[key].langCode,
            langDesc: data[key].langDesc,
            functionName: data[key].functionName,
            version: data[key].version
          });
        }
      });
    },
    updateFunctionLang() {
      let data_update = [];
      for (const key in this.items) {
        data_update.push({
          id: this.items[key].id,
          langCode: this.items[key].langCode,
          functionId: this.functionId,
          functionName: this.items[key].functionName,
          version: this.items[key].version
        });
      }
      functionAPI.updateFunctionLang(data_update)
        .then(response => {
          this.$message.success({
            content: this.$t("module.function.modifyFunctionNameSuccess"),
            duration: 3
          });
        })
        .catch(error => {
          this.$message.error({
            content: error.message,
            duration: 3
          });
        });
      this.$emit("Close", data_update || []);
    }
  },
  watch: {},
  directives: {}
};
</script>
